<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="theme-color" content="#2196f3">
    <title>Follow Finance</title>
    <!-- inject:css -->
    <!-- endinject -->
    <link rel="icon" href="img/icon.png">
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
    <div class="view navbar-fixed">
        <div class="pages">
            <div data-page="panel-left" class="page">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="center">Menu</div>
                    </div>
                </div>
                <div class="page-content">
                    <div class="content-block">
                        <p>
                            Put Something Here
                        </p>
                    </div>
                    <!--<div class="content-block-title">Framework7 Kitchen Sink</div>-->
                    <div class="list-block">
                        <ul>
                            <li><a href="pages/statistics.html" class="item-link close-panel">
                                <div class="item-content">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">STATISTICS</div>
                                    </div>
                                </div>
                            </a>
                            </li>
                            <li><a href="pages/color-themes.html" class="item-link close-panel">
                                <div class="item-content">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">Color Theme</div>
                                    </div>
                                </div>
                            </a>
                            </li>
                            <li><a href="#" class="item-link close-panel">
                                <div class="item-content">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">Close Menu</div>
                                    </div>
                                </div>
                            </a>
                            </li>
                            <li><a href="#" class="item-link close-panel exit-app">
                                <div class="item-content">
                                    <div class="item-media"><i class="icon icon-f7"></i></div>
                                    <div class="item-inner">
                                        <div class="item-title">EXIT APP</div>
                                    </div>
                                </div>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="views">
    <div class="view view-main">
        <div class="pages navbar-fixed">
            <div data-page="index" class="page">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="center">Follow Finance</div>
                        <div class="right">
                            <a href="#" class="open-panel link icon-only">
                                <i class="icon icon-bars"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="page-content">
                    <div class="content-block-title">New Record</div>
                    <form class="list-block inputs-list">
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-media"><i class="icon material-icons">today</i></div>
                                    <div class="item-inner">
                                        <div class="item-title label">Time</div>
                                        <div class="item-input">
                                            <input id="date" type="date" placeholder="date"/>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul id="addContainer">
                            <li class="swipeout">
                                <div class="item-content swipeout-content">
                                    <div class="item-inner">
                                        <div class="item-title floating-label">Detail</div>
                                        <div class="item-input">
                                            <textarea class="resizable detail"></textarea>
                                        </div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title floating-label">Amount</div>
                                        <div class="item-input">
                                            <input type="number" class="amount" placeholder=""/>
                                        </div>
                                    </div>
                                </div>
                                <div class="swipeout-actions-right">
                                    <a href="#" class="swipeout-delete" style="">Delete</a>
                                </div>
                            </li>
                        </ul>
                        <script id="addTemplate" type="text/html">
                            <li class="swipeout">
                                <div class="item-content swipeout-content">
                                    <div class="item-inner">
                                        <div class="item-title floating-label">Detail</div>
                                        <div class="item-input">
                                            <textarea class="resizable detail"></textarea>
                                        </div>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title floating-label">Amount</div>
                                        <div class="item-input">
                                            <input type="number" class="amount" placeholder=""/>
                                        </div>
                                    </div>
                                </div>
                                <div class="swipeout-actions-right">
                                    <a href="#" class="swipeout-delete" style="">Delete</a>
                                </div>
                            </li>
                        </script>
                    </form>

                    <div class="content-block">
                        <p class="buttons-row">
                            <a href="#" id="addMore" class="button button-big color-cyan">
                                <i class="material-icons">add</i>
                            </a>
                        </p>
                        <p class="buttons-row">
                            <a href="#" id="submit" class="button button-big button-fill button-raised color-pink">Submit</a>
                            <a href="#" id="reset" class="button button-big button-fill button-raised color-blue">Reset</a>
                        </p>
                    </div>

                    <div class="content-block-title">Today Records</div>
                    <div class="list-block">
                        <ul id="todayList">

                        </ul>
                        <script type="text/html" id="todayListTmpl">
                            <%for(var i=0;i < todays.length;i++){%>
                            <li class="swipeout" data-id="<%= todays[i]._id %>">
                                <div class="item-content swipeout-content">
                                    <div class="item-inner">
                                        <div class="item-title"><%=todays[i].content%></div>
                                        <div class="item-after"><span class="badge bg-blue">￥<%=todays[i].amount / 100 %></span></div>
                                    </div>
                                </div>
                                <div class="swipeout-actions-right">
                                    <a href="#" data-id="<%=todays[i]._id%>" data-confirm="Are you sure you want to delete this?" data-confirm-title="Delete?" class="swipeout-delete">DELETE</a>
                                </div>
                            </li>
                            <%}%>
                        </script>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">TODAY TOTAL</div>
                                        <div class="item-after"><span class="badge bg-red" id="todayTotal">￥00.00</span></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="login-screen modal-in">
    <div class="view">
        <div class="page">
            <div class="page-content login-screen-content">
                <div class="login-screen-title">Follow Finance</div>
                <div class="content-block">Please login</div>
                <form>
                    <div class="list-block inputs-list">
                        <ul>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">Username</div>
                                    <div class="item-input">
                                        <input tabindex="0" type="text" name="username" placeholder="Your username">
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">Password</div>
                                    <div class="item-input">
                                        <input tabindex="1" type="password" name="password" placeholder="Your password">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="content-block"><a tabindex="2" href="#" class="button button-big button-fill">GO</a></div>
                    <div class="content-block">
                        <div class="list-block-label">You can use your phone number to login.
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<!-- inject:js -->
<!-- endinject -->
<script>
    myApp.init();
</script>
</body>
</html>